import { App } from 'vue';
import {
  locale, ElButton, ElMessage, ElMessageBox,
  ElNotification,
  ElMenu,
  ElMenuItem,
  ElSubmenu,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElTooltip,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElScrollbar,
  ElColorPicker,
  ElDrawer,
  ElSwitch
} from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css'
import lang from 'element-plus/lib/locale/lang/zh-cn';
import 'dayjs/locale/zh-cn';
// import locale from 'element-plus/lib/locale'

// element size属性类型
export type Size = 'default' | 'meduim' | 'small' | 'mini';
interface ElementOptions {
  size: Size;
}

export default (app: App, options: ElementOptions): void => {
  locale(lang);
  // 按需导入组件列表
  const components = [
    ElButton,
    ElMessage,
    ElMessageBox,
    ElNotification,
    ElMenu,
    ElMenuItem,
    ElSubmenu,
    ElBreadcrumb,
    ElBreadcrumbItem,
    ElTooltip,
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
    ElScrollbar,
    ElDrawer,
    ElColorPicker,
    ElSwitch

  ];

  components.forEach(component => {
    app.component(component.name, component);
  });

  // Vue.prototype 替换为 config.globalProperties
  // 文档说明 https://v3.cn.vuejs.org/guide/migration/global-api.html#vue-prototype-%E6%9B%BF%E6%8D%A2%E4%B8%BA-config-globalproperties
  app.config.globalProperties.$message = ElMessage;
  app.config.globalProperties.$notify = ElNotification;
  app.config.globalProperties.$confirm = ElMessageBox.confirm;
  app.config.globalProperties.$alert = ElMessageBox.alert;
  app.config.globalProperties.$prompt = ElMessageBox.prompt;

  console.log(app);
  // element-plus全局配置
  // 说明文档：https://element-plus.gitee.io/#/zh-CN/component/quickstart#quan-ju-pei-zhi
  // 该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸 small，zIndex 设置弹框的初始 z-index（默认值：2000）。
  app.config.globalProperties.$ELEMENT = {
    // size: 'medium'
    size: options.size // 为了size尺寸变化持久化
    // zIndex: 2000 弹框zIndex默认值：2000
  };
};
